import React, { PureComponent } from 'react';
import { Table, Input } from 'antd';
import { store } from "../../local/index"
import { connect } from 'dva';
import {debounce} from "lodash"
const style = {
    input: {
        width: "100%"
    },
    table: {
        marginTop: "20px"
    }
}
class SwitchProject extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            st:null,
            qString: "",
            pagination:{
                pageSize:5,
                pageNum:1
            },
            loading:true,
            total:0,
            data: []
        }
        this.onConfirm = this.onConfirm.bind(this);
        this.fuzzy = this.fuzzy.bind(this);
        this.select = this.select.bind(this);
        this.paginationChange=this.paginationChange.bind(this)
        this.getData=this.getData.bind(this)
        this.handleDebounce = debounce(this.getData, 1000, { 'maxWait': 1000 });
    }
    componentDidMount() {
        if (this.props.onLoaded) {
            this.props.onLoaded(this);
        }
        this.getData()

    }
    async paginationChange(pagination){
        await this.setState({
            pagination:{
                ...this.state.pagination,
                pageNum:pagination.current
            }
        })
        this.getData()
    }
    getData(){
        const {pagination,qString}=this.state;
        if (this.props.getProjects) {
            this.props.getProjects({...pagination,name:qString}, (data) => {
                this.setState({
                    loading:false,
                    data:data?data.rows:[],
                    total:data?data.total:0
                })
                if(this.props.onSuccess){
                    this.props.onSuccess(data);
                }
            }, (error) => {
                if(this.props.onError){
                    this.props.onError(error);
                }
            });
        }
    }
    async fuzzy(e) {
        e.persist();
        await this.setState({
            qString: e.target.value
        })
        this.handleDebounce()
    }
    async select(e, item) {
        e.preventDefault()
        e.stopPropagation()
        if (this.props.updateCurrentProject) {
            store.clear()
            await this.props.updateCurrentProject(item)
            if(this.props.refresh){
                this.props.updateCurrentBridge(null)
                this.props.updateCurrentRoad(null)
                this.props.refresh()
            }
        }
       
        
        this.props.parent.setModalVisible(false)
        
    }
    
    onConfirm(params = {}) {
        this.props.form.resetFields()
        if (params.onSuccess) {
            params.onSuccess(params);
        }
        if (params.onError) {
            params.onError("");
        }
    }
    render() {
        const {
            columns = [
                {
                    title: '中文名',
                    dataIndex: 'name',
                    key: 'name',
                },
                {
                    title: '英文名',
                    dataIndex: 'enName',
                    key: 'enName',
                },
                {
                    title: '操作',
                    dataIndex: 'action',
                    key: 'action',
                    render: (value,record) => <a onClick={(e) => this.select(e, record)}>选择</a>
                },
            ]
        } = this.props;
        return (
            <div>
                <Input style={style.input} onChange={this.fuzzy} placeholder="请输入项目名称" />
                <Table onChange={this.paginationChange} pagination={{'current':this.state.pagination.pageNum,total:this.state.total}} style={style.table} dataSource={this.state.data} columns={columns}
                    loading={this.state.loading}
                    rowKey={record => record.id}>
                </Table>
            </div>
        );
    }
}

export default connect(
    ({  }) => ({  }),
    dispatch => ({
        getProjects: (params, onSuccess, onError) => dispatch({
            type: 'project/getProjectsData',
            payload: {
                params,
                onSuccess,
                onError
            }
        }),
        updateCurrentProject: (project) => dispatch({
            type: 'project/updateCurrent',
            payload: project
        }),
        updateCurrentRoad: (road, onSuccess, onError) => dispatch({
            type: 'refRoads/updateCurrent',
            payload: {
                road,
                onSuccess,
                onError
            }
        }),
        updateCurrentBridge: (bridge) => dispatch({
            type: 'bridge/updateCurrent',
            payload: bridge
        }),
    })
)(SwitchProject);